<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>echarts大数据图表样式demo</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.min.js"></script>

    <style>

        body {

            background: rgba(0, 0, 0, 0.8);
            background-size: cover;
        }

        div {
            box-sizing: border-box;
        }

        .clearfix {
            clear: both;
        }

        .container-header {
            width: 100%;
            height: 74px;
            text-align: center;
            box-sizing: border-box;
        }


        .container-header .location {
            position: absolute;
            right: 17px;
            top: 46px;
        }

        .location i {
            font-size: 18px;
            font-weight: 800;
            color: #7e9bc6;
        }

        .location span {
            font-size: 20px;
            line-height: 30px;
            color: #168fcd;
        }

        .container-header h3 {
            position: absolute;
            top: 20px;
            left: 800px; /* 修改 标题 是否在 中间显示 */
            line-height: 2px;
            font-size: 1.3vw;
            font-weight: 400;
            color: #fa0606;

        }

        /* 边角 */

        .left-top,
        .right-top,
        .left-bottom,
        .right-bottom {
            position: absolute;
            width: 13px;
            height: 13px;
        }

        .left-top {
            left: 0;
            top: 0;
            border-left: solid 2px #045291;
            border-top: solid 2px #045291;
        }

        .right-top {
            right: 0;
            top: 0;
            border-right: solid 2px #045291;
            border-top: solid 2px #045291;
        }

        .left-bottom {
            left: 0;
            bottom: 0;
            border-left: solid 2px #045291;
            border-bottom: solid 2px #045291;
        }

        .right-bottom {
            right: 0;
            bottom: 0;
            border-right: solid 2px #045291;
            border-bottom: solid 2px #045291;
        }

        .resource-right .com-count-title {
            font-size: 16px;
            margin-left: 10px;
        }

        .com-count-title {
            color: #1bb4f9;
            padding: 20px;
            font-size: 22px;
        }

        .com-screen-content {
            width: 100%;
            height: auto;
        }

        .com-screen-content2 {
            width: 100%;
            height: auto;
        }

        .filter-type {
            font-size: 0;
        }

        .filter-type li:hover {
            cursor: pointer;
        }

        .filter-type li {
            display: inline-block;
            width: 120px;
            line-height: 40px;
            font-family: myFirstFont;
            font-size: 20px;
            text-align: center;
            color: #024f9b;
            border: solid 1px #075797;
            background: #0d2343;
        }

        .filter-type li.active {
            color: white;
            background: #0c182d;
            border: solid 1px #1bb9f9;
        }

        .container-content {
            padding: 10px 20px;
            box-sizing: border-box;
        }

        .count-base,
        .count-resource,
        .count-share,
        .count-topic {
            position: relative;
            padding: 20px;
            margin-top: 10px;
            box-sizing: border-box;
        }

        .com-count-title {
            color: #1bb4f9;
            font-size: 18px;
            padding: 0;
        }

        .count-base {
            margin-left: 10px;
            float: left;
            /*浮动*/
            width: 32%;
            height: 350px;
            background: center no-repeat;
            background-size: cover;
        }

        .count-resource {
            margin-left: 10px;
            float: left;
            width: 32%;
            height: 350px;
            background: center no-repeat;
            background-size: cover;
        }

        .count-share {
            margin-left: 10px;
            float: left;
            width: 48.4%;
            height: 350px;
            background: center no-repeat;
            background-size: cover;
        }

        .count-topic {
            margin-left: 10px;
            float: left;
            width: 48.4%;
            height: 350px;
            background: center no-repeat;
            background-size: cover;
        }

        .data-label {
            position: absolute;
            top: 20px;
            right: 10px;
        }

        .data-label li {
            float: left;
            width: 120px;
            text-align: center;
            font-size: 18px;
            color: #828c9d;
        }

        .data-label li:hover,
        .data-label li.active {
            color: #fff;
            background: center no-repeat;
        }


        /* author lyc */

        * {
            margin: 0px;
            padding: 0px;
            font-family: '微软雅黑';
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        li {
            list-style: none
        }

        img {
            border: none
        }

        a {
            text-decoration: none;
        }

        .topRec_List dl,
        .maquee {
            width: 90%;
            overflow: hidden;
            margin: 0 auto;
            color: #f0ece2
        }

        .topRec_List dd {
            float: left;
            text-align: left;
            border-bottom: 1px solid #1B96EE;
            color: #1B96EE;
            font-size: 14px;
        }

        .topRec_List dl dd:nth-child(1) {
            width: 50%;
            height: 40px;
            line-height: 40px;
        }

        .topRec_List dl dd:nth-child(2) {
            width: 30%;
            height: 40px;
            line-height: 40px;
        }

        .topRec_List dl dd:nth-child(3) {
            width: 20%;
            height: 40px;
            line-height: 40px;
        }

        .maquee {
            height: 195px;
        }

        .topRec_List ul {
            width: 100%;
            height: 195px;
        }

        .topRec_List li {
            width: 100%;
            height: 38px;
            line-height: 38px;
            text-align: left;
            font-size: 12px;
            color: #76dbd1
        }

        /*.topRec_List li:nth-child(2n){ background:#077cd0}*/

        .topRec_List li div {
            float: left;
        }

        .topRec_List li div:nth-child(1) {
            width: 50%;
        }

        .topRec_List li div:nth-child(2) {
            width: 30%;
        }

        .topRec_List li div:nth-child(3) {
            width: 20%;
        }

        .use-data {
            text-align: center;
            padding: 2px 0;
            margin-top: 3%;
            height: 5%;
            background: center no-repeat;
            background-size: cover;
            border: solid 1px #093552;
            border-right: 0px;
            border-left: 0;
        }

        .use-data li {
            width: 30%;
            font-size: 0;
            display: inline-table;
            border-right: solid 1px #1f4191;
        }

        .use-data li:last-child {
            border-right: 0;
        }

        .use-data .data-count {
            color: #fff;
            font-family: myFirstFont;
            height: 1%;
            font-size: 16px;
        }

        .use-data .data-name {
            color: #1bb9f9;
            font-size: 16px;
        }


        .container-header .nowTime {
            position: absolute;
            left: 20px;
            top: 41px;
            font-size: 0;
        }

        .container-header .nowTime li {
            display: inline-block;
            width: 300px;
            height: 40px;
            font-size: 30px;
            color: #fff;
        }

        .nowTime li {
            display: inline-block;
            float: left;
            /*font-weight: 800;*/
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .nowTime li div {
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 20px;
            text-align: left;
        }

        .nowTime li p {
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 16px;
        }

    </style>


</head>

<body>
<div class="container-header">
    <ul class="nowTime">
        <li>
            <div id="time"></div>
        </li>
    </ul>

    <h3>echarts 测试demo</h3>

    <svg width="1900" height="80">
        <polyline fill="transparent" stroke-width="3"
                  points="0,16 343.8,16 382,32 477.5,32 515.7,48 1375.2,48 1432.5,32 1528,32 1566.1999999999998,16 1910,16"
                  stroke="#85A5F4">
            <animate attributeName="stroke-dasharray" attributeType="XML"
                     from="0, 960.9191501911595, 0, 960.9191501911595" to="0, 0, 1921.838300382319, 0" dur="4s"
                     begin="0s" calcMode="spline" keyTimes="0;1" keySplines="0.4,1,0.49,0.98"
                     repeatCount="indefinite"></animate>
        </polyline>
        <polyline fill="transparent" stroke-width="2" points="573,64 1337,64" stroke="#5A77BA">
            <animate attributeName="stroke-dasharray" attributeType="XML" from="0, 382, 0, 382"
                     to="0, 0, 764, 0" dur="4s" begin="0s" calcMode="spline" keyTimes="0;1"
                     keySplines=".4,1,.49,.98" repeatCount="indefinite"></animate>
        </polyline>
    </svg>


</div>

<div class="container-content">
    <div class="top">
        <div class="count-base">
            <div class="com-count-title">资源总量构成</div>
            <div class="com-screen-content">

                <div id="main1" style="width:100%;height:300px;">

                </div>
            </div>
            <span class="left-top"></span>
            <span class="right-top"></span>
            <span class="left-bottom"></span>
            <span class="right-bottom"></span>
        </div>


        <div class="count-resource q1">
            <div class="com-count-title">资源总量统计</div>
            <div class="com-screen-content2">
                <ul class="use-data">
                    <li>
                        <p class="data-count">15681 </p>
                        <span class="data-name">数据总量</span>
                    </li>
                    <li>
                        <p class="data-count"> 1731</p>
                        <span class="data-name">更新量</span>
                    </li>
                    <li>
                        <p class="data-count">11753</p>
                        <span class="data-name">共享次数</span>
                    </li>
                </ul>
                <div class="com-screen-content">
                    <div id="main2" style="margin-top:10px;width:100%;height:240px;"></div>
                </div>
                <span class="left-top"></span>
                <span class="right-top"></span>
                <span class="left-bottom"></span>
                <span class="right-bottom"></span>
            </div>
        </div>

        <div class="count-resource q2">
            <div class="com-count-title">基础库统计</div>


            <div class="com-screen-content">
                <ul class="data-label">
                    <li class="active" data-type="1">法人库</li>
                    <li data-type="2">人口库</li>
                    <li data-type="3">电子证照库</li>
                </ul>
                <ul class="use-data"></ul>
                <div id="main3" style="margin-top:10px;width:100%;height:240px;">

                </div>
            </div>
            <span class="left-top"></span>
            <span class="right-top"></span>
            <span class="left-bottom"></span>
            <span class="right-bottom"></span>
        </div>
    </div>



    <div class="mid">
        <div class="count-share w1">
            <div class="com-count-title">数据共享次数</div>
            <div class="com-screen-content">
                <div class="topRec_List">
                    <dl>
                        <dd>资源名称</dd>
                        <dd>调用方</dd>
                        <dd>调用时间</dd>
                    </dl>
                    <div class="maquee">
                        <ul>

                            <li>
                                <div>审计局主要职责</div>
                                <div>审计局</div>
                                <div>08:20:26</div>
                            </li>
                            <li>

                                <div>残联主要职责</div>
                                <div>残联</div>
                                <div>08:20:36</div>
                            </li>
                            <li>

                                <div>委老干部局主要职责</div>
                                <div>老干部局</div>
                                <div>08:20:46</div>
                            </li>
                            <li>
                                <div>公安局主要职责</div>
                                <div>公安局</div>
                                <div>08:20:56</div>
                            </li>
                            <li>
                                <div>民政局主要职责</div>
                                <div>民政局</div>
                                <div>08:21:04</div>
                            </li>
                            <li>
                                <div>交通运输局主要职责</div>
                                <div>交通运输局</div>
                                <div>08:21:07</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <span class="left-top"></span>
            <span class="right-top"></span>
            <span class="left-bottom"></span>
            <span class="right-bottom"></span>
        </div>


        <div class="count-share w2">
            <div class="com-count-title">数据共享次数</div>
            <div class="com-screen-content">
                <div id="main5" style="width:100%;height:300px;">

                </div>
            </div>
            <span class="left-top"></span>
            <span class="right-top"></span>
            <span class="left-bottom"></span>
            <span class="right-bottom"></span>
        </div>
    </div>


    <div class="bottom">
        <div class="count-topic e1">
            <div class="com-count-title">主题库统计</div>
            <div class="com-screen-content">
                <div id="main6" style="width:100%;height:300px;">

                </div>
            </div>
            <span class="left-top"></span>
            <span class="right-top"></span>
            <span class="left-bottom"></span>
            <span class="right-bottom"></span>
        </div>

        <div class="count-topic e2">
            <div class="com-count-title">主题库共享次数</div>
            <div class="com-screen-content">
                <div id="main7" style="width:100%;height:300px;">

                </div>
            </div>
            <span class="left-top"></span>
            <span class="right-top"></span>
            <span class="left-bottom"></span>
            <span class="right-bottom"></span>
        </div>
    </div>
    <div class="clearfix"></div>
</div>


<script type="text/javascript">
    function autoScroll(obj) {
        $(obj).find("ul").animate({
            marginTop: "-39px"
        }, 500, function () {
            $(this).css({
                marginTop: "0px"
            }).find("li:first").appendTo(this);
        })
    }

    $(function () {
        setInterval('autoScroll(".maquee")', 2000);
    })


</script>

<script>

    //顶部时间
    function getTime() {
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowTime;

        nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };

    function fillZero(str) {
        var realNum;
        if (str < 10) {
            realNum = '0' + str;
        } else {
            realNum = str;
        }
        return realNum;
    }

    setInterval(getTime, 1000);

</script>

</body>

</html>


<script>

    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
            {
                name: 'Pressure',
                type: 'gauge',
                progress: {
                    show: true
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value}'
                },
                data: [
                    {
                        value: 50,
                        name: 'SCORE'
                    }
                ]
            }
        ]
    };

    option && myChart.setOption(option);

    // 测试
    var chartDom2 = document.getElementById('main2');
    var myChart2 = echarts.init(chartDom2);
    option && myChart2.setOption(option);


    var chartDom3 = document.getElementById('main3');
    var myChart3 = echarts.init(chartDom3);
    option && myChart3.setOption(option);

    var chartDom5 = document.getElementById('main5');
    var myChart5 = echarts.init(chartDom5);
    option && myChart5.setOption(option);


    var chartDom6 = document.getElementById('main6');
    var myChart6 = echarts.init(chartDom6);
    option && myChart6.setOption(option);


    var chartDom7 = document.getElementById('main7');
    var myChart7 = echarts.init(chartDom7);
    option && myChart7.setOption(option);



</script>